<div class="viewer-wrapper">
  <div class="viewer-title" [id]="getViewId(exampleData)" [attr.fui-docs-example-title]="exampleData.title">
    <div class="viewer-title-spacer">{{exampleData?.title}}</div>

    <div class="viewer-title-button" (click)="toggleSourceView()" [fuiTooltip]="showSource ? 'Hide source': 'View source'">
      <svg fuiIcon="script-empty" size="lg" *ngIf="showSource"></svg>
      <svg fuiIcon="script" size="lg" *ngIf="!showSource"></svg>
    </div>
  </div>

  <div class="viewer-source" *ngIf="showSource">
    <fui-radio-group
      fuiRadioLinkGroup
      [(ngModel)]="currentSrcKind"
      (ngModelChange)="onSrcKindChange($event)"
    >
      <fui-radio-item *ngFor="let srcKind of srcKinds" [value]="srcKind">{{srcKind}}</fui-radio-item>
    </fui-radio-group>

    <div class="viewer-source-copy icon-btn" fuiTooltip="Copy example source" (click)="copySource()">
      <svg fuiIcon="copy" size="lg"></svg>
    </div>

    <div class="viewer-source-editor"></div>
  </div>

  <div class="viewer-body">
    <ng-container *ngIf="exampleData?.iframe">
      <fui-frame-window>
        <ng-template *ngIf="!editing" [cdkPortalOutlet]="selectedPortal"></ng-template>
        <ng-container *ngIf="editing">
          <fui-compiler
            [code]="code"
            [module]="module"
          ></fui-compiler>
        </ng-container>
      </fui-frame-window>
    </ng-container>
    <ng-container *ngIf="!exampleData?.iframe">
      <ng-container *ngTemplateOutlet="viewerBodyTemplate"></ng-container>
    </ng-container>
  </div>

  <ng-template #viewerBodyTemplate>
    <div [hidden]="editing" class="fui-example-portal"></div>
    <ng-container *ngIf="editing">
      <fui-compiler
        [code]="code"
        [module]="module"
        [context]="selectedComponentRef?.instance"
      ></fui-compiler>
    </ng-container>
  </ng-template>
</div>
